<template>
    <div class="main">
        <div class="main_body">
            <div class="main_body_title">五次方</div>
            <div class="main_body_router">
                <div class="main_body_router_item">
                    <div class="main_body_router_item_hover">
                        <div class="main_body_router_user">
                            <router-link to="/data/five-cube">
                                <div class="main_body_router_menu_item">数据可视化</div>
                            </router-link>
                        </div>
                    </div>
                </div>
                <div class="main_body_router_item">
                    <div class="main_body_router_item_hover">
                        <div @click="handleIsShowUser" class="main_body_router_user">
                            用户管理
                        </div>
                        <div v-show="isShowUser" class="main_body_router_menu">
                            <router-link to="/user">
                                <div class="main_body_router_menu_item">普通用户</div>
                            </router-link>
                            <router-link to="sysUser">
                                <div class="main_body_router_menu_item">系统用户</div>
                            </router-link>
                        </div>
                    </div>
                </div>
                <div class="main_body_router_item">
                    <div class="main_body_router_item_hover">
                        <div @click="handleIsShowAnswer" class="main_body_router_user">
                            回答管理
                        </div>
                        <div v-show="isShowAnswer" class="main_body_router_menu">
                            <router-link to="/problem">
                                <div class="main_body_router_menu_item">问题管理</div>
                            </router-link>
                            <router-link to="/report">
                                <div class="main_body_router_menu_item">举报问题</div>
                            </router-link>
                        </div>
                    </div>
                </div>
                <div class="main_body_router_item">
                    <div class="main_body_router_item_hover">
                        <div class="main_body_router_user">
                            <router-link to="/article">
                                <div class="main_body_router_menu_item">文章管理</div>
                            </router-link>
                        </div>
                    </div>
                </div>
                <div class="main_body_router_item">
                    <div class="main_body_router_item_hover">
                        <div @click="handleIsShowActivity" class="main_body_router_user">
                            活动管理
                        </div>
                        <div v-show="isShowActivity" class="main_body_router_menu">
                            <router-link to="/activity">
                                <div class="main_body_router_menu_item">发布活动</div>
                            </router-link>
                        </div>
                    </div>
                </div>
                <div class="main_body_router_item">
                    <div class="main_body_router_item_hover">
                        <div @click="handleIsShowPayment" class="main_body_router_user">
                            支付管理
                        </div>
                        <div v-show="isShowPayment" class="main_body_router_menu">
                            <router-link to="/payment">
                                <div class="main_body_router_menu_item">支付管理</div>
                            </router-link>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="main_view">
            <router-view></router-view>
        </div>
    </div>
</template>

<script setup lang="ts">
import {ref} from "vue";

//是否显示用户管理
const isShowUser = ref<boolean>(false)

//是否显示回答管理
const isShowAnswer = ref<boolean>(false)

//是否显示活动管理
const isShowActivity = ref<boolean>(false)

//是否显示支付管理
const isShowPayment = ref<boolean>(false)

//点击事件 是否显示用户管理
const handleIsShowUser = () => {
    isShowUser.value = !isShowUser.value
    // isShowAnswer.value = false
}

//点击事件 是否显示回答管理
const handleIsShowAnswer = () => {
    isShowAnswer.value = !isShowAnswer.value
    // isShowUser.value = false
}

//点击事件 是否显示活动管理
const handleIsShowActivity = () => {
    isShowActivity.value = !isShowActivity.value
}

//点击事件 是否显示支付管理
const handleIsShowPayment = () => {
    isShowPayment.value = !isShowPayment.value
}
</script>

<style lang="less" scoped>
.main {
  .main_body {
    width: 250px;
    position: fixed;
    height: 100vh;
    background-color: #a29bf6;
    letter-spacing: 1px;

    .main_body_title {
      padding: 10px;
      text-align: center;
      font-size: 35px;
      font-weight: bold;
      font-style: italic;
    }

    .main_body_router {
      text-align: center;
      font-size: 20px;

      .main_body_router_item {

        .main_body_router_item_hover {
          padding: 10px 10px 0 10px;

          .main_body_router_user {
            cursor: pointer;
          }

          .main_body_router_menu {
            margin-left: 30px;

            .main_body_router_menu_item {
              margin: 10px 10px 0 10px;
            }
          }
        }
      }
    }
  }

  .main_view {
    margin-left: 250px;
    height: 100vh;
    position: sticky;
    overflow-y: auto;
  }
}

.router-link-exact-active {
  color: red !important;
}
</style>